﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example05.aspx.cs" Inherits="Chapter23.Example05" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 23-5 创建动画</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut ico" href="images/favicon.ico" type="image/x-ico" />
    <style type="text/css">
        p {
            padding: 5px;
            border: medium double black;
            background-color: lightgray;
            font-family: sans-serif;
        }

        #banana {
            font-size: large;
            border: medium solid black;
        }

            #banana:hover {
                -webkit-animation-delay: 100ms;
                -webkit-animation-duration: 500ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -webkit-animation-name: GrowShrink;
            }

        @-webkit-keyframes GrowShrink {
            to {
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
    </style>
</head>
<body>
    <p>
        There are lots of different kinds of fruit - there are you over 500 
        varieties of <span id="banana">banana</span> alone. By the time we add the 
        countless types of apples, oranges, and other 
        well-known fruit, we are faced with thousands of choices.
    </p>
</body>
</html>
